<template>
  <div class="mainContainer">
    <div class="left">
      <div class="left-top">
        <home-card :data="{title:'党员信息'}">
          <left-top/>
        </home-card>
      </div>
      <div class="left-center">
        <home-card :data="{title:'党组织构成'}">
          <left-center/>
        </home-card>
      </div>
      <div class="left-bottom">
        <home-card :data="{title:'党员画像'}">
          <LeftBottom/>
        </home-card>
      </div>
    </div>
    <img src="@/assets/preview (2).png" class="center-image floating-image" />
    <div class="center">
      <img src="@/assets/output3.gif" alt="党徽" width="600" height="709" style="margin-top: 200px">
      <div class="center-top">
        <div class="text" style="width: 250px">
          政策解读专栏
        </div>
      </div>
      <div class="zhuan-lan" style="display: flex">
        <div class="code-bg">
          <img src="@/assets/preview%20(7).png" alt="Image" width="80" height="80" />
        </div>
        <div style="width: 400px;word-break: break-all">
          <ArticleDisplay
              title="《提高专项附加扣除标准十问答》"
              updateTime="2023-09-01"
              source="税务总局网站"
              :content="content"
          />
        </div>
      </div>
      <div class="center-left">
        <div>
          <div v-if="currentModel==='manage'" class="left-bg left-select">
            <div class="icon-text">
              <img src="@/assets/preview%20(9).png" alt="Icon" class="icon" />
              <div class="text">党员管理</div>
            </div>
          </div>
          <div v-else class="left-bg" @click="setCurrentModel('manage')">
            <div class="icon-text">
              <img src="@/assets/preview%20(9).png" alt="Icon" class="icon" />
              <div class="text">党员管理</div>
            </div>
          </div>
        </div>
      </div>
      <div class="center-right">
        <div>
          <div v-if="currentModel==='server'" class="right-bg right-select">
            <div class="icon-text">
              <img src="@/assets/preview%20(11).png" alt="Icon" class="icon" />
              <div class="text">党群服务</div>
            </div>
          </div>
          <div v-else class="right-bg" @click="setCurrentModel('server')">
            <div class="icon-text">
              <img src="@/assets/preview%20(11).png" alt="Icon" class="icon" />
              <div class="text">党群服务</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="right-top">
        <home-card :data="{title:'党员增长情况'}" flag="right">
          <RightTop/>
        </home-card>
      </div>
      <div class="right-center">
        <home-card :data="{title:'党费缴纳情况'}" flag="right">
          <RightCenter/>
        </home-card>
      </div>
      <div class="right-bottom">
        <home-card :data="{title:'优秀党员TOP5'}" flag="right">
          <RightBottom/>
        </home-card>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import HomeCard from "@/views/components/HomeCard.vue";
import LeftTop from "@/views/components/left/left-top/LeftTop.vue";
import LeftCenter from "@/views/components/left/left-center/LeftCenter.vue";
import {ref, type Ref} from "vue";
import ArticleDisplay from "@/views/components/center/ArticleDisplay.vue";
import RightTop from "@/views/components/right/RightTop.vue";
import RightCenter from "@/views/components/right/RightCenter.vue";
import RightBottom from "@/views/components/right/RightBottom.vue";
import LeftBottom from "@/views/components/left/left-bottom/LeftBottom.vue";
const content = "8月31日，国务院发布《关于提高个人所得税有关专项附加扣除标准的通知》（国发[2023]13号，以下简称《通知》），提高了3岁以下婴幼儿照护、子女教育、赡养老人专项附加扣除（以下简称“一老一小”扣除）标准。"

let currentModel:Ref<String> =ref("manage")

function setCurrentModel(item:String) {
  currentModel.value=item
}
</script>

<style lang="scss" scoped>
.mainContainer {
  display: flex;
  height: 100%;
}

.left {
  z-index: 1;
  margin-top: -10px;
  flex: 2;
  display: flex;
  flex-direction: column;
}

.right {
  margin: 0;
  padding: 0;
  margin-top: -10px;
  flex: 2;
  display: flex;
  flex-direction: column;
}

.center {
  z-index: 1;
  margin-top: -10px;
  display: flex;
  flex-direction: column;
  flex: 2;
  position: relative;
}

.center-top{
  position: absolute;
  top: 8%;
  left: 35%;
  display: flex;
  flex: 1;
}

.zhuan-lan{
  position: absolute;
  top: 12%;
  left: 15%;
}

.code-bg{
  margin-right: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
  height: 95px;
  width: 95px;
  background-image: url('@/assets/preview (6).png');
  background-size: cover;
  background-position: center;
}

.center-left, .center-right {
  cursor: pointer;
  position: absolute;
  top: 46%;  /* 垂直居中 */
  transform: translateY(-50%);  /* 使元素垂直居中 */
  width: 200px;  /* 设置固定宽度，可以调整 */
  height: 100px;  /* 设置固定高度，可以调整 */
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  color: white;
}

.center-left {
  left: -10%;  /* 偏左，距离左侧20%的位置 */
  .icon-text{
    margin-left: -40px;
  }
}

.center-right {
  right: -10%;  /* 偏右，距离右侧20%的位置 */
  .icon-text{
    margin-left: 50px;
  }
}

.left-bg{
  position: relative;  /* 设置为相对定位，使内容能够相对于它定位 */
  width: 320px;
  height: 250px;
  background-size: cover;  /* 背景图片覆盖整个容器 */
  background-position: center;  /* 背景图片居中显示 */
  background-image: url("@/assets/left-no-select.png");
  border-radius: 8px; /* 如果需要给背景加圆角 */
}

.left-select{
  background-image: url("@/assets/left-select.png");
}

.right-bg{
  position: relative;  /* 设置为相对定位，使内容能够相对于它定位 */
  width: 320px;
  height: 250px;
  background-size: cover;  /* 背景图片覆盖整个容器 */
  background-position: center;  /* 背景图片居中显示 */
  background-image: url("@/assets/right-no-select.png");
  border-radius: 8px; /* 如果需要给背景加圆角 */
}

.right-select{
  background-image: url("@/assets/right-select.png");
}

.icon-text {
  cursor: pointer;
  position: absolute;  /* 使图标和文字层叠在图片上 */
  top: 50%;  /* 垂直居中 */
  left: 50%;  /* 水平居中 */
  transform: translate(-50%, -50%);  /* 调整定位，确保居中 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.icon {
  width: 40px;  /* 设置图标大小 */
  height: 40px;
  margin-bottom: 10px;  /* 图标和文字之间的间距 */
}

.text {
  width: 150px;
  writing-mode: horizontal-tb;
  letter-spacing: 5px;
  text-orientation: upright;
  background: linear-gradient(0deg, rgb(255, 229, 119) 0px, rgb(255, 255, 255) 100%) text;
  filter: drop-shadow(0px 0px 10px rgb(136, 11, 1) );
  user-select: text;
  font-family: YouSheBiaoTiHei;
  justify-content: center;
  color: rgb(255, 229, 119);
  font-size: 30px;
}


/* 通用样式 */
.floating-image {
  position: absolute; /* 浮动效果 */
  transform: translateX(-50%); /* 水平居中 */
  width: auto; /* 图片宽度可调整 */
  height: var(--height, 100vh); /* 默认高度为 100%，可覆盖 */
  z-index: -10; /* 确保在其他内容之上 */
  pointer-events: none; /* 防止图片干扰鼠标交互 */
}

/* 中间图片 */
.center-image {
  top: 10%;
  left: 50%;
  --height: 80%;
  z-index: -1;
}

.left-top {
  height: 33%;
  flex: 2;
  display: flex;
}
.right-top {
  height: 33%;
  z-index: 1;
  flex: 2;
  align-self: flex-end; /* 将元素在父容器内对齐到右边 */
}
.left-center {
  height: 33%;
  flex: 2;
}
.right-center {
  height: 33%;
  z-index: 1;
  flex: 2;
  align-self: flex-end; /* 将元素在父容器内对齐到右边 */
}

.left-bottom, .right-bottom {
  height: 33%;
  flex: 2;
}
.right-bottom {
  z-index: 1;
  flex: 2;
  align-self: flex-end; /* 将元素在父容器内对齐到右边 */
}
</style>
